<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>选择体检日期</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <el-calendar v-model="orderDate">
            <template #date-cell="{ data }">
                <p :class="data.isSelected ? 'is-selected' : 's'">
                    {{ data.day.split('-')[2] }}
                    {{ data.isSelected ? '✔️' : '' }}
                <p class="remaining">余{{ 200-remainingPeople[data.day] || 0 }}</p>
                </p>
            </template>
        </el-calendar>

        <div class="bottom-btn">
            <div></div>
            <div @click="nextStep">下一步</div>
        </div>

        <div class="bottom-ban"></div>
        <footer>
            <ul>
                <li @click="()=>{router.push('/hospital')}">
                    <i class="fa fa-home"></i>
                    <p>云医院</p>
                </li>
                <li @click="()=>{router.push('/setmeal')}">
                    <i class="fa fa-opencart"></i>
                    <p>商城</p>
                </li>
                <li @click="()=>{router.push('/index')}">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li @click="()=>{router.push('/personal')}">
                    <i class="fa fa-user"></i>
                    <p>我</p>
                </li>
            </ul>
        </footer>
    </div>
</template>

<script setup>
import { selectDateApi } from '@/api/Orders';
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import  router from '@/router';
const orderDate = ref(new Date());
let remainingPeople = ref({});

onMounted(async () => {
    // 从sessionStorage和vuex中获取hpId
    const hpId = JSON.parse(sessionStorage.getItem('orderdetail')).hpid;
    ferchAllRemainPeople(hpId);
})

/**
 * 获取当月所有日期
 */
const getMouthDates = () => {
    const date = new Date();
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 确保月份是两位数
    const numDays = new Date(year, date.getMonth() + 1, 0).getDate();
    const dates = [];
    for (let i = 1; i <= numDays; i++) {
        const day = i.toString().padStart(2, '0'); // 确保日期是两位数
        dates.push(`${year}-${month}-${day}`);
    }
    return dates;
}

/**
 * 获取某天剩余人数
 */
const ferchRemainPeople = async (hpId, orderDate) => {
    try {
        const res = await selectDateApi(hpId, orderDate);
        remainingPeople.value[orderDate] = res.data;
    } catch (error) {
        console.log(error);
    }
}

/**
 * 获取当月所有日期剩余人数
 */
const ferchAllRemainPeople = async (hpId) => {
    const dates = getMouthDates();
    dates.forEach(date => {
        ferchRemainPeople(hpId, date);
    });
}

const nextStep = () => {
    // 将orderDate存入sessionStorage和vuex
    // sessionStorage.setItem('orderDate', orderDate.value);
    // store.commit('setOrderDate', orderDate.value);

    let data = JSON.parse(sessionStorage.getItem('orderdetail'))
    data.orderdate = orderDate.value.toISOString().split('T')[0];
    sessionStorage.setItem('orderdetail',JSON.stringify(data))
    router.push('/confirmorder')
}

</script>

<style src="../assets/css/selectdate.css" scoped></style>

<style scoped>
.remaining{
    font-size: small;
    color: darkgray;
}
.is-selected {
  color: #1989fa;
}
</style>